<template>
	<div>
		<el-form ref="configForm" :model="form" :rules="rules" label-position="top">
			<div class="base-container">
				<p class="title">密钥参数配置</p>
				<div class="flex items-center mb-8px">
					<el-tooltip
						content="发卡机构是发行城市公共交通IC卡和交通一卡通二维码，并对清分结算交易数据进行验证的机构。"
						placement="top-start">
						<el-icon :size="14" color="#8E8E8E">
							<QuestionFilled />
						</el-icon>
					</el-tooltip>
					<p class="sub-title font-bold">发卡机构</p>
				</div>

				<div class="key-box">
					<div class="flex items-center mb-8px">
						<span class="prefix">*</span>
						<el-tooltip content="非对称密钥对中公开的密钥，在数字签名时，公钥用于验证" placement="top-start">
							<el-icon :size="14" color="#8E8E8E">
								<QuestionFilled />
							</el-icon>
						</el-tooltip>
						<p class="sub-title">公钥</p>
					</div>
					<el-form-item label="" prop="asymmetricCardPubSecret">
						<el-input
							readonly
							v-model="form.asymmetricCardPubSecret"
							type="textarea"
							:rows="4"
							placeholder="非对称密钥对中公开的密钥，在数字签名时，公钥用于验证" />
					</el-form-item>
					<div class="flex items-center mb-8px">
						<span class="prefix">*</span>
						<el-tooltip content="非对称密钥对中非公开的密钥，在数字签名时，私钥用于签名" placement="top-start">
							<el-icon :size="14" color="#8E8E8E">
								<QuestionFilled />
							</el-icon>
						</el-tooltip>
						<p class="sub-title">私钥</p>
					</div>
					<el-form-item label="" prop="asymmetricCardPriSecret">
						<el-input
							readonly
							v-model="form.asymmetricCardPriSecret"
							type="textarea"
							:rows="4"
							placeholder="非对称密钥对中非公开的密钥，在数字签名时，私钥用于签名" />
					</el-form-item>
				</div>

				<div class="flex items-center mb-8px mt-10px">
					<el-tooltip content="支付账号是为交通一卡通二维码支付提供资金来源的用户个人账户" placement="top-start">
						<el-icon :size="14" color="#8E8E8E">
							<QuestionFilled />
						</el-icon>
					</el-tooltip>
					<p class="sub-title font-bold">支付账号</p>
				</div>

				<div class="key-box">
					<div class="flex items-center mb-8px">
						<span class="prefix">*</span>
						<el-tooltip content="非对称密钥对中公开的密钥，在数字签名时，公钥用于验证" placement="top-start">
							<el-icon :size="14" color="#8E8E8E">
								<QuestionFilled />
							</el-icon>
						</el-tooltip>
						<p class="sub-title">用户公钥</p>
					</div>
					<el-form-item label="" prop="asymmetricPayPubSecret">
						<el-input
							readonly
							v-model="form.asymmetricPayPubSecret"
							type="textarea"
							:rows="4"
							placeholder="用于渠道方调用发码平台接口，由发码平台向渠道提供验签公钥" />
					</el-form-item>
					<div class="flex items-center mb-8px">
						<span class="prefix">*</span>
						<el-tooltip content="非对称密钥对中非公开的密钥，在数字签名时，私钥用于签名" placement="top-start">
							<el-icon :size="14" color="#8E8E8E">
								<QuestionFilled />
							</el-icon>
						</el-tooltip>
						<p class="sub-title">用户私钥</p>
					</div>
					<el-form-item label="" prop="asymmetricPayPriSecret">
						<el-input
							readonly
							v-model="form.asymmetricPayPriSecret"
							type="textarea"
							:rows="4"
							placeholder="用于渠道方调用发码平台接口，由发码平台对接口参数进行验签" />
					</el-form-item>
				</div>
        <el-button class="mt-10px" type="primary" size="small" style="width: 100%" @click="generateKey()">生成公私钥对</el-button>
			</div>
		</el-form>

		<div style="height: 60px"></div>

		<div class="page-footer">
			<el-button @click="onCancel">取消</el-button>
			<el-button type="primary" @click="onConfirm">下一步</el-button>
		</div>
	</div>
</template>

<script setup>
import { generateCardSecret, generateUserPaySecret } from '@/api/bus/PlatCodeManagement'
import { addCertificateManagementConfig, getCertificateManagementDetail } from '@/api/bus/certificateManagement'

const route = useRoute()
const { proxy } = getCurrentInstance()
const emits = defineEmits(['cancel', 'confirm'])

const flowId = computed(() => {
	return Number(route.query.id) || null
})

const configForm = ref()
const form = ref({
	asymmetricCardPubSecret: null,
	asymmetricCardPriSecret: null,
	asymmetricPayPubSecret: null,
	asymmetricPayPriSecret: null
})
const certificateManagement = ref()

const rules = {
	asymmetricCardPubSecret: [{ required: true, message: '请生成发卡机构公钥' }],
	asymmetricCardPriSecret: [{ required: true, message: '请生成发卡机构私钥' }],
	asymmetricPayPubSecret: [{ required: true, message: '请生成支付账号公钥' }],
	asymmetricPayPriSecret: [{ required: true, message: '请生成支付账号私钥' }]
}

const pageInit = async () => {
	if (!flowId.value) return
	const res = await getCertificateManagementDetail(flowId.value)
	if (res.code == 200) {
		certificateManagement.value = res.data
		form.value.asymmetricCardPubSecret = res.data.asymmetricCardPubSecret
		form.value.asymmetricCardPriSecret = res.data.asymmetricCardPriSecret
		form.value.asymmetricPayPubSecret = res.data.asymmetricPayPubSecret
		form.value.asymmetricPayPriSecret = res.data.asymmetricPayPriSecret
	}
}

const generateKey = () => {
  // 发卡机构
  generateCardSecret().then((res) => {
    if (res.code == 200) {
      form.value.asymmetricCardPubSecret = res.data.publicKey
      form.value.asymmetricCardPriSecret = res.data.privateKey

      // 支付账号
      generateUserPaySecret().then((res) => {
        if (res.code == 200) {
          form.value.asymmetricPayPubSecret = res.data.publicKey
          form.value.asymmetricPayPriSecret = res.data.privateKey
        }
      })
    }
  })
}

// 比较form中的字段数据和certificateManagement中同样的字段数据是否相同
function compareFields(form, certificateManagement) {
	if (!certificateManagement) return false
	for (const key in form) {
		if (form.hasOwnProperty(key) && certificateManagement.hasOwnProperty(key)) {
			if (form[key] !== certificateManagement[key]) {
				return false
			}
		}
	}
	return true
}

const onCancel = () => {
	proxy.$tab.closeOpenPage('/qrCode/certificateManagement')
}

const onConfirm = () => {
	configForm.value.validate((valid) => {
		if (valid) {
			const areFieldsEqual = compareFields(form.value, certificateManagement.value)
			if (!areFieldsEqual) {
				addCertificateManagementConfig(form.value).then((res) => {
					if (res.code == 200) {
						emits('confirm', {
							id: res.data,
							back: 0
						})
					} else {
						proxy.$modal.msgError(res.msg)
					}
				})
			} else {
				emits('confirm', {
					id: flowId.value,
					back: 1
				})
			}
		}
	})
}

onMounted(() => {
	pageInit()
})
</script>

<style lang="scss" scoped>
@import './base.scss';
</style>
